<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base th:href="@{/}">
</head>
<body>
    <a href="rest/movie">跳转到rest风格的电影列表</a>
    <hr>
    <h1>测试RestAPI</h1>
    <hr>
    <h2>Get方式</h2>
    <!--1.get方式，查询数据 路劲传递参数，前端设计！ -->
    <!-- 查询 id = 1 的用户 -->
    <a href="rest/user/1">查询id=1的用户</a> <br>
    <!-- 根据账号和密码查询用户信息 -->
    <a href="rest/user/root/abc123">根据账号和密码查询用户</a>
    <hr>
    <h2>Post方式</h2>
    <!-- 2.post方式 保存数据 使用请求体传递参数！ -->
    <!-- 添加用户信息 -->
    <form action="rest/user" method="post">
        <input type="text" name="id" placeholder="用户ID"> <br>
        <input type="text" name="username" placeholder="用户名"> <br>
        <input type="text" name="password" placeholder="用户密码"> <br>
        <input type="submit" value="保存">
    </form>
    <hr>
    <h2>Put方式</h2>
    <form action="rest/user" method="post">
        <input type="hidden" name="_method" value="put">
        <input type="text" name="id" placeholder="用户ID"> <br>
        <input type="text" name="username" placeholder="用户名"> <br>
        <input type="text" name="password" placeholder="用户密码"> <br>
        <input type="submit" value="保存">
    </form>
    <hr>
    <h2>Delete方式</h2>
    <a href="rest/user/1" onclick="return deleteById(this.href)">删除id=1</a>
    <a href="rest/user/1/zhangsan" onclick="return deleteById(this.href)">删除 id =1 username=张三</a>
    <form id="fm">
        <input type="hidden" name="_method" value="delete">
    </form>

    <script>
        function deleteById(path){
            //1.获取表单对象
            const fmNode = document.getElementById("fm");
            //2.修改action属性改为本次传入的访问路径
            fmNode.action = path
            //3.提交表单
            fmNode.submit();
            return false;
        }

        /**
         * <a th:href="@{|/book/toUpdateBook/${book.bookId}|}">修改</a>
         * <a th:href="@{/news/list/{type}(type=${type},page=${indexPage},size=${size})}">上一页</a>
         * type会被后端传来的type变量值赋值，
         * page会被后端传来的indexPage变量值赋值，
         * size会被后端传来的size变量值赋值。
         * 它们作用的结果：
         *
         *  <a th:href="@{|/book/update/${name}(key=${key})|}">第一个</a>
         *  <a th:href="@{/book/update/${name}(key=${key})}">第一个</a>  错误
         *  <a th:href="@{/book/update/{name}(key=${key},name=${name})}">第一个</a>
         *  <a th:href="@{/book/update/(key=${key})}+${name}">第一个</a>  错误
         *
         *
         *如果括号前出现了对应的大括号变量，映射时会替换掉，这里如果传来的type为"top"，则映射的url对应位置为/news/list/top
         *         如果括号前没有出现对应的大括号变量，则会将括号里对应的变量变为url参数形式，即?page=1&size=10
         */

    </script>
</body>
</html>